<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<span>会员中心</span>
			<div class="VIPCard">
				<div class="left">
					<div class="t">饿了么会员卡</div>
					<div class="m">VIP mumbership</div>
					<div class="u">会员享受16种权益</div>
				</div>
				<div class="right">
					<div class="bk">
						<span>您已开通</span>
					</div>
				</div>
			</div>
		</header>
		
		<div class="block"></div>
		
		<div class="VIP-text">
			<span class="left">会员特权</span>
			<span class="right">全部16项特权 ></span>
		</div>
		
		<div class="p-top">
			<ul>
				<li>
					<img src="../assets/tq_01.png">
					<span>积分3倍</span>
				</li>
				<li>
					<img src="../assets/tq_02.png">
					<span>免除广告</span>
				</li>
				<li>
					<img src="../assets/tq_03.png">
					<span>饿了么公益</span>
				</li>
				<li>
					<img src="../assets/tq_04.png">
					<span>优惠群</span>
				</li>
			</ul>
		</div>
		
		<div class="p-top">
			<ul>
				<li>
					<img src="../assets/tq_05.png">
					<span>极速送达</span>
				</li>
				<li>
					<img src="../assets/tq_06.png">
					<span>优惠提醒</span>
				</li>
				<li>
					<img src="../assets/tq_07.png">
					<span>偏好分析</span>
				</li>
				<li>
					<img src="../assets/tq_08.png">
					<span>专属客服</span>
				</li>
			</ul>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '@/components/Footer.vue';
	import UnderBox from '@/components/UnderBox.vue';

	export default {
		name: 'Index',
		data() {
			return {
				
			}
		},
		components: {
			Footer,
			UnderBox
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header ******************/
	.wrapper header {
		width: 100%;
		height: 60vw;
		background-image: url(../assets/bg_01.jpg);
		border-bottom-left-radius: 20vw;
		border-bottom-right-radius: 20vw;

		display: flex;
		flex-direction: column;
		text-align: center;
		position: relative;
	}
	
	.wrapper header span {
		font-size: 6vw;
		font-family: "微软雅黑";
		color: #ffffff;
		margin-top: 7vw;
	}
	
	.wrapper header .VIPCard {
		width: 80%;
		height: 45vw;
		margin-top: 0vw;
		position: absolute;
		transform: translate(13%, 60%);
		background-image: url(../assets/bg_02.jpg);
		display: flex;
		flex-direction: row;
		border-radius: 3vw;
	}
	
	.wrapper header .VIPCard .left {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.wrapper header .VIPCard .left div {
		margin-left: 6vw;
	}
	
	.wrapper header .VIPCard .left .t {
		margin-top: 5vw;
		font-size: 7vw;
		color: #000000;
		font-family: 'STKaiti';
		font-weight: 600;
	}
	
	.wrapper header .VIPCard .left .m {
		margin-top: 2vw;
		font-size: 5vw;
		color: #000000;
		font-family: 'STKaiti';
	}
	
	.wrapper header .VIPCard .left .u {
		margin-top: 10vw;
		font-size: 4vw;
		color: #000000;
		font-family: 'STKaiti';
	}
	
	.wrapper header .VIPCard .right {
		width: auto;
		height: auto;
	}
	
	.wrapper header .VIPCard .right .bk {
		margin-top: 33vw;
		margin-left: 5vw;
		height: 8vw;
		background-color: #282C34;
	}
	
	.wrapper header .VIPCard .right .bk span {
		margin-top: 2vw;
		font-size: 6vw;
		font-family: 'STKaiti';
	}
	
	.wrapper .block {
		width: 100%;
		height: 20vw;
	}
	
	.wrapper .VIP-text {
		border-top: #ABB2BF 1vw solid;
		display: flex;
		justify-content: space-between;
		padding:3vw 3vw 3vw 3vw;
	}
	
	.wrapper .VIP-text .left {
		font-size: 5vw;
		font-family: "微软雅黑";
		font-weight: 550;
	}
	
	.wrapper .p-top {
		width: 100%;
		height: 25vw;
	}
	
	.wrapper .p-top ul {
		display: flex;
		justify-content: space-around;
		text-align: center;
	}
	
	.wrapper .p-top ul li {
		display: flex;
		flex-direction: column;
	}
	
	img {
		width: 14vw;
		border-radius: 3vw;
	}
	
	.wrapper .p-top ul li span {
		margin-top: 2vw;
	}

</style>